<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>筛选</title>
    <link type="text/css" rel="stylesheet" href="style/reset.css">
    <link type="text/css" rel="stylesheet" href="style/main.css">
</head>
<body>
<div class="headerBar">
    <div class="topBar">
        <div class="comWidth">
            <div class="leftArea">
                <a href="#" class="collection">收藏慕课</a>
            </div>
            <div class="rightArea">
                欢迎来到慕课网!<a href="#">[登陆]</a><a href="#">[免费注册]</a>
            </div>
        </div>
    </div>
    <div class="logoBar">
        <div class="comWidth">
            <div class="logo fl">
                <a href="#"><img src="images/icon/logo.png" alt="慕课网"></a>
            </div>
            <div class="search_box fl">
                <input type="text" class="search_input fl">
                <input type="button" value="搜 索" class="search_btn fr">
            </div>
            <div class="shopCar fr">
                <span class="shopText">购物车</span>
                <span class="shopNum">0</span>
            </div>
        </div>
    </div>
    <div class="navBox">
        <div class="comWidth">
            <div class="shopClass fl">
                <h3>全部商品分类<i></i></h3>

                <div class="shopClass_show hide">
                    <dl class="shopClass_item">
                        <dt>
                            <a href="#" class="b">手机</a>
                            <a href="#">数码</a>
                            <a href="#" class="aLink">合约机</a>
                        </dt>
                        <dd>
                            <a href="#">荣耀3X</a>
                            <a href="#">单反</a>
                            <a href="#">智能设备</a>
                        </dd>
                    </dl>

                    <dl class="shopClass_item">
                        <dt>
                            <a href="#" class="b">手机</a>
                            <a href="#">数码</a>
                            <a href="#" class="aLink">合约机</a>
                        </dt>
                        <dd>
                            <a href="#">荣耀3X</a>
                            <a href="#">单反</a>
                            <a href="#">智能设备</a>
                        </dd>
                    </dl>

                    <dl class="shopClass_item">
                        <dt>
                            <a href="#" class="b">手机</a>
                            <a href="#">数码</a>
                            <a href="#" class="aLink">合约机</a>
                        </dt>
                        <dd>
                            <a href="#">荣耀3X</a>
                            <a href="#">单反</a>
                            <a href="#">智能设备</a>
                        </dd>
                    </dl>

                    <dl class="shopClass_item">
                        <dt>
                            <a href="#" class="b">手机</a>
                            <a href="#">数码</a>
                            <a href="#" class="aLink">合约机</a>
                        </dt>
                        <dd>
                            <a href="#">荣耀3X</a>
                            <a href="#">单反</a>
                            <a href="#">智能设备</a>
                        </dd>
                    </dl>
                </div>
            </div>
            <ul class="nav fl">
                <li><a href="#" class="active">数码城</a></li>
                <li><a href="#">天黑黑</a></li>
                <li><a href="#">团购</a></li>
                <li><a href="#">发现</a></li>
                <li><a href="#">二手特卖</a></li>
                <li><a href="#">唯品会</a></li>
            </ul>
        </div>
    </div>
</div>
<div class="hr_15"></div>
<!-- banner  -->
<div class="comWidth clearfix products">
    <div class="leftArea">
        <div class="leftNav vertical">
            <h3 class="nav_title">手机、数码</h3>

            <div class="nav_cont">
                <h3>手机通讯</h3>
                <ul class="nav_cont_list  clearfix">
                    <li><a href="#">全部手机</a></li>
                    <li><a href="#">拍照神器</a></li>
                    <li><a href="#">拍照神器</a></li>
                    <li><a href="#">手机导航</a></li>
                    <li><a href="#">拍照神器</a></li>
                    <li><a href="#">全部手机</a></li>
                    <li><a href="#">拍照神器</a></li>
                </ul>
            </div>
        </div>

        <div class="leftNav vertical">
            <h3 class="nav_title">手机、数码</h3>

            <div class="nav_cont">
                <h3>手机通讯</h3>
                <ul class="nav_cont_list clearfix">
                    <li><a href="#">全部手机</a></li>
                    <li><a href="#">拍照神器</a></li>
                    <li><a href="#">拍照神器</a></li>
                </ul>
            </div>
        </div>

        <div class="leftNav vertical">
            <h3 class="nav_title">手机、数码</h3>

            <div class="nav_cont">
                <h3>手机通讯</h3>
                <ul class="nav_cont_list clearfix">
                    <li><a href="#">全部手机</a></li>
                    <li><a href="#">拍照神器</a></li>
                    <li><a href="#">拍照神器</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="rightArea">
        <div class="screening_box">
            <dl class="screening clearfix">
                <dt>手机</dt>
                <dd class="limit"><a href="#" class="active">不限</a></dd>
                <dd class="screening_list">
                    <!-- 为了让点击区域更大 -->
                    <ul class="clearfix">
                        <li><a href="#">Samsung/三星</a></li>
                        <li><a href="#">Apple/苹果</a></li>
                        <li><a href="#" class="active">Huawei/华为</a></li>
                        <li><a href="#">Samsung/三星</a></li>
                        <li><a href="#">Apple/苹果</a></li>
                        <li><a href="#">Huawei/华为</a></li>
                    </ul>
                </dd>
            </dl>

            <dl class="screening clearfix">
                <dt>手机</dt>
                <dd class="limit"><a href="#" class="active">不限</a></dd>
                <dd class="screening_list">
                    <!-- 为了让点击区域更大 -->
                    <ul class="clearfix">
                        <li><a href="#" class="active">Samsung/三星</a></li>
                        <li><a href="#">Apple/苹果</a></li>
                        <li><a href="#">Huawei/华为</a></li>
                        <li><a href="#">Samsung/三星</a></li>
                        <li><a href="#">Apple/苹果</a></li>
                    </ul>
                </dd>
            </dl>

            <dl class="screening clearfix">
                <dt>手机</dt>
                <dd class="limit"><a href="#" class="active">不限</a></dd>
                <dd class="screening_list">
                    <!-- 为了让点击区域更大 -->
                    <ul class="clearfix">
                        <li><a href="#">Samsung/三星</a></li>
                        <li><a href="#">Apple/苹果</a></li>
                        <li><a href="#">Huawei/华为</a></li>
                        <li><a href="#">Samsung/三星</a></li>
                        <li><a href="#">Apple/苹果</a></li>
                        <li><a href="#">Huawei/华为</a></li>
                        <li><a href="#">Samsung/三星</a></li>
                        <li><a href="#" class="active">Apple/苹果</a></li>
                        <li><a href="#">Huawei/华为</a></li>
                        <li><a href="#">Samsung/三星</a></li>
                        <li><a href="#">Apple/苹果</a></li>
                        <li><a href="#">Huawei/华为</a></li>
                    </ul>
                </dd>
            </dl>

            <dl class="screening clearfix">
                <dt>更多选项</dt>
                <dd class="screening_list">
                    <!-- 为了让点击区域更大 -->
                    <div class="screen_more">
                        <a href="#">Samsung/三星</a>
                    </div>
                    <!-- 为了让点击区域更大 -->
                    <div class="screen_more">
                        <a href="#">Apple/苹果</a>
                    </div>
                </dd>
            </dl>
        </div>

        <div class="hr_15"></div>

        <div class="addInfo">
            <div class="address">
                <span class="add_text">送至</span>

                <div class="select">
                    <h3>海淀区五环内</h3>
                    <span></span>
                    <ul class="show_select">
                        <li>上地</li>
                        <li>龙泽</li>
                        <li>五道口</li>
                    </ul>
                </div>
            </div>
            <div class="fr screen_text">
            <span class="check">
                <input type="checkbox" id="check"><label for="check">仅显示有货</label>
            </span>
            <span class="shop_number">
                共<em>12</em>件
            </span>
            </div>
        </div>

        <div class="products_list screening_list_more clearfix">
            <div class="item">
                <div class="item_cont">
                    <div class="img_item">
                        <a href="#"><img src="images/icon/shop_01.png" alt="logo"></a>
                    </div>
                    <p><a href="#">文字介绍文字介绍文字介绍文字介绍</a></p>

                    <p class="money">￥888</p>

                    <p><a href="#" class="addCar">加入购物车</a></p>
                </div>
            </div>

            <div class="item">
                <div class="item_cont">
                    <div class="img_item">
                        <a href="#"><img src="images/icon/shop_01.png" alt="logo"></a>
                    </div>
                    <p><a href="#">文字介绍文字介绍文字介绍文字介绍</a></p>

                    <p class="money">￥888</p>

                    <p><a href="#" class="addCar">加入购物车</a></p>
                </div>
            </div>
            <div class="item">
                <div class="item_cont">
                    <div class="img_item">
                        <a href="#"><img src="images/icon/shop_01.png" alt="logo"></a>
                    </div>
                    <p><a href="#">文字介绍文字介绍文字介绍文字介绍</a></p>

                    <p class="money">￥888</p>

                    <p><a href="#" class="addCar">加入购物车</a></p>
                </div>
            </div>
            <div class="item">
                <div class="item_cont">
                    <div class="img_item">
                        <a href="#"><img src="images/icon/shop_01.png" alt="logo"></a>
                    </div>
                    <p><a href="#">文字介绍文字介绍文字介绍文字介绍</a></p>

                    <p class="money">￥888</p>

                    <p><a href="#" class="addCar">加入购物车</a></p>
                </div>
            </div>

            <div class="item">
                <div class="item_cont">
                    <div class="img_item">
                        <a href="#"><img src="images/icon/shop_01.png" alt="logo"></a>
                    </div>
                    <p><a href="#">文字介绍文字介绍文字介绍文字介绍</a></p>

                    <p class="money">￥888</p>

                    <p><a href="#" class="addCar">加入购物车</a></p>
                </div>
            </div>

            <div class="item">
                <div class="item_cont">
                    <div class="img_item">
                        <a href="#"><img src="images/icon/shop_01.png" alt="logo"></a>
                    </div>
                    <div class="hot"></div>
                    <p><a href="#">文字介绍文字介绍文字介绍文字介绍</a></p>

                    <p class="money">￥888</p>

                    <p><a href="#" class="addCar">加入购物车</a></p>
                </div>
            </div>
        </div>

        <div class="hr_25"></div>

        <div class="page">
            <a href="#">上一页</a><a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a>
            <a href="#">6</a><span class="hl">...</span><a href="#">200</a><a href="#">下一页</a><span class="morePage">共200页，到第</span>
            <input type="text" class="pageNum"><span class="ye">页</span><input type="button" class="pageBtn" value="确定">
        </div>
    </div>
</div>

<div class="hr_25"></div>

<!-- 底部 -->
<div class="footer">
    <p><a href="#">慕课简介</a><i>|</i><a href="#">慕课公告</a><i>|</i><a href="#">招贤纳士</a><i>|</i><a
            href="#">联系我们</a><i>|</i><a href="#">客服热线:0722-4818111</a></p>

    <p>关于我们常见问题反馈意见全站地图京ICP证030173号</p>

    <p class="web"><a href="#"><img src="images/icon/logo.png" alt="logo"></a><a href="#"><img
            src="images/icon/logo.png"
            alt="logo"></a><a href="#"><img
            src="images/icon/logo.png" alt="logo"></a><a href="#"><img src="images/icon/logo.png" alt="logo"></a></p>
</div>
</body>
</html>